<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue'
import MethodView from './MethodView.vue'
import EntityView from './EntityView.vue'
import { http } from '../utils/Request'
import router from '../config/Router'
import { Entity, ApiMethod, buildTsProject } from '../entities/Entity'

import {
    NCard,
    NLayout,
    NLayoutSider,
    NLayoutContent,
    NLayoutHeader,
    NSpace,
    NAffix,
    NTooltip
} from 'naive-ui'

import { NFloatButton, NIcon, NInput, NDrawer, NDrawerContent } from 'naive-ui'

import { ReturnUpBack, SearchSharp, LogoNodejs } from '@vicons/ionicons5'
import { selectDirectory } from '../utils/IPC'
import { log } from 'cetools'

const controllerList = reactive<Array<DocumentItem>>([])

const currentDocumentItem = ref<DocumentItem>({ methodList: [] })

const displayMethodList = ref<Array<Method>>([])

const documents = ref<APIDocument>({ documents: [] })

const documentClick = (item: DocumentItem) => {
    currentDocumentItem.value = item
    displayMethodList.value.splice(0, displayMethodList.value.length)
    displayMethodList.value.push(...item.methodList)
}

const loadApiDocument = () => {
    const url = '' + router.currentRoute.value.query.serverAddress
    http.post(url, {}, (result) => {
        console.log(result)
        controllerList.push(...result.data.documents)
        documents.value = result.data
    })
}

const toProjectList = () => {
    router.push('/list')
}

onMounted(() => {
    loadApiDocument()
})

const entityActive = ref<boolean>(false)

const currentViewEntity = ref<Array<Entity>>([{ className: '', fieldList: [] }])

const showEntity = (name: string) => {
    const entities = documents.value.entities as Map<string, Entity>

    const classNameList = name.split('|')
    const classChain = new Array<Entity>()

    for (const i in classNameList) {
        const entity = entities[classNameList[i]]
        if (entity) {
            classChain.push(entity)
        } else {
            classChain.push({ className: classNameList[i], fieldList: [] })
        }
    }

    if (classChain.length > 0) {
        currentViewEntity.value = classChain
        entityActive.value = true
    }
}

const currentInputValue = ref<string>('')

watch(currentInputValue, (newValue: string) => {
    displayMethodList.value = currentDocumentItem.value.methodList.filter((it) => {
        return it.methodName.search(newValue) >= 0 || it.description.search(newValue) >= 0
    })
})

const buildTsApiFiles = () => {
    selectDirectory((param) => {
        buildTsProject(param, documents.value)
    })
}
</script>

<template>
    <n-layout has-sider class="root">
        <n-layout-sider bordered content-style="padding: 8px;">
            <n-space vertical>
                <n-card
                    v-for="item in controllerList"
                    :key="item.path"
                    class="fw ci"
                    @click="documentClick(item)"
                >
                    <template #footer>
                        {{ item.description }}
                    </template>
                    <template #action>
                        {{ item.path }}
                    </template>
                </n-card>
            </n-space>
        </n-layout-sider>
        <n-layout :native-scrollbar="false" style="overflow-y: hidden">
            <n-layout-header class="search head">
                <n-input v-model:value="currentInputValue" placeholder="搜索">
                    <template #prefix>
                        <n-icon :component="SearchSharp" />
                    </template>
                </n-input>
            </n-layout-header>
            <n-layout-content
                content-style="padding: 8px;"
                :native-scrollbar="false"
                style="overflow-y: auto"
                class="content"
            >
                <MethodView
                    v-for="item in displayMethodList"
                    :key="item.methodName"
                    :data="item"
                    :parent-path="currentDocumentItem.path"
                    @show-entity="showEntity"
                ></MethodView>
            </n-layout-content>
        </n-layout>
        <n-affix :top="10">
            <n-float-button :right="70" :bottom="20" shape="square" @click="buildTsApiFiles()">
                <n-tooltip trigger="hover">
                    <template #trigger>
                        <n-icon>
                            <LogoNodejs />
                        </n-icon>
                    </template>
                    生成TS请求接口文件
                </n-tooltip>
            </n-float-button>
            <n-float-button :right="20" :bottom="20" shape="square" @click="toProjectList()">
                <n-tooltip trigger="hover">
                    <template #trigger>
                        <n-icon>
                            <ReturnUpBack />
                        </n-icon>
                    </template>
                    退回到主页
                </n-tooltip>
            </n-float-button>
        </n-affix>
        <n-drawer v-model:show="entityActive" :width="800" placement="right">
            <n-drawer-content>
                <EntityView
                    :data="currentViewEntity"
                    :entities="documents.entities as Map<string, Entity>"
                ></EntityView>
            </n-drawer-content>
        </n-drawer>
    </n-layout>
</template>

<style scoped>
.root {
    width: 100vw;
    height: 100vh;
    background-color: rgba(99, 99, 99, 0.3);
    overflow-y: hidden;
}

.fw {
    width: 100%;
}

.ci {
    cursor: pointer;
}

.search {
    padding: 8px;
}

.head {
    height: 3rem;
}

.content {
    height: calc(100vh - 3rem);
}
</style>
